<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 模板</title>
</head>
<body>

<p>This is an example HTML template.</p>
<script>
    // 创建一个 EventSource 对象，连接到通知接口
    const eventSource = new EventSource('/notifications');

    // 监听通知事件
    eventSource.addEventListener('message', function(event) {
        const notification = JSON.parse(event.data);

        // 处理通知
        console.log('Received notification:', notification);

        // 在页面上显示通知信息
        const notificationElement = document.createElement('div');
        notificationElement.innerHTML = `
    <p>Race ID: ${notification.raceId}</p>
    <p>Race Name: ${notification.raceName}</p>
    <p>Days Remaining: ${notification.daysRemaining}</p>
    <hr>
  `;
        document.getElementById('notificationsContainer').appendChild(notificationElement);
    });

    // 监听连接关闭事件
    eventSource.addEventListener('error', function(event) {
        if (event.readyState === EventSource.CLOSED) {
            console.log('Connection closed');
        }
    });

    // 关闭连接时的处理
    window.addEventListener('beforeunload', function() {
        eventSource.close();
    });

</script>
</body>
</html>
